<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta content="width=device-width, initial-scale=1,user-scalable=no" name="viewport" />
    <title>日期间隔计算器</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap-datetimepicker.min.css">
    <link rel="stylesheet" type="text/css" href="css/toastr.min.css">
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/bootstrap-datetimepicker.min.js"></script>
    <script type="text/javascript" src="js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
    <script type="text/javascript" src="js/toastr.min.js"></script>
</head>

<body>
    <div id="legend" class="">
        <legend class="">日期间隔</legend>
    </div>
<!--     <div class="input-append date form_datetime" id="startDatepicker">
	    <input size="16" type="text" value="" readonly>
	    <span class="add-on"><i class="icon-th"></i></span>
	</div> -->
	<div class="form-group">
        <label for="dtp_input1" class="col-md-2 control-label">开始日期</label>
        <div class="input-group date col-md-2" id="startDatepicker" data-date="2014-10-13" data-date-format="yyyy-mm-dd" data-link-field="dtp_input1" data-link-format="yyyy-mm-dd">
            <input class="form-control" size="16" type="text" value="" readonly>
			<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
        </div>        
    </div>
    <div class="form-group">
        <label for="dtp_input2" class="col-md-2 control-label">结束日期</label>
        <div class="input-group date col-md-2" id="endDatepicker" data-date="2024-10-13" data-date-format="yyyy-mm-dd" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
            <input class="form-control" size="16" type="text" value="" readonly>
			<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
        </div>
		<button id="aroundSearch" type="button" class="btn col-md-1 btn-default btn-sm">计算</button>
    </div>

    <script type="text/javascript">
    	$('#startDatepicker').datetimepicker({
	        language: 'zh-CN',
	        weekStart: 1,
	        todayBtn:  1,
			autoclose: 1,
			todayHighlight: 1,
			startView: 2,
			minView: 2,
			forceParse: 0
	    });
	    $('#endDatepicker').datetimepicker({
	        language: 'zh-CN',
	        weekStart: 1,
	        todayBtn:  1,
			autoclose: 1,
			todayHighlight: 1,
			startView: 2,
			minView: 2,
			forceParse: 0
	    });
		// $('#endDatepicker').datetimepicker();
    </script>
</body>

</html>